import AddTodo from "./pages/AddTodo";
import TodoList from "./pages/TodoList";
import TodoFooter from "./pages/TodoFooter";

import "./App.css";
import { useState } from "react";

export default function App() {
  /*
    1. 组件关系
      组件有嵌套关系
        父子组件：嵌套一层
        祖孙组件：嵌套多层

      组件没有嵌套关系
        兄弟组件

    2. 组件通信方案 
      父子组件通信 props
      祖孙组件通信 使用props一层层传递数据 -> App -> TodoList -> TodoItem 
      兄弟组件通信 使用状态提升。将（状态）数据提升到它们的公共父组件中
  */

  const [todoList, setTodoList] = useState([
    { id: 1, name: "烫头" },
    { id: 2, name: "抽烟" },
    { id: 3, name: "喝酒" },
  ]);

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <AddTodo />
        <TodoList todoList={todoList}/>
        <TodoFooter />
      </div>
    </div>
  );
}
